.data-insight-page {
    background-color: $gray-10;
    padding-bottom: 80px;

    @include md-down {
        padding-bottom: 40px;
    }
}

.data-insight-breadcrumbs {
    margin: 32px 0;
    font-size: 0.875rem;
    a {
        @include owid-link-90;

        &:visited {
            color: $blue-90; // Don't change the color.
        }
    }
    svg {
        height: 12px;
        margin: 0 8px 1px 8px;
    }
    span {
        color: $blue-60;
    }

    span {
        color: $blue-60;
    }

    @include sm-only {
        display: none;
    }
}

.data-insight__dateline {
    @include h6-black-caps;
}

.data-insight-body {
    background-color: #fff;
    padding: 24px;
    margin-bottom: 30px;

    .data-insight-heading-link {
        color: $blue-90;
        &:hover {
            text-decoration: underline;
        }
    }

    h1 {
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 1.875rem;
    }

    .article-block__image {
        outline: 1px solid $blue-10;
        margin-top: 24px;
    }

    .article-block__text {
        font-size: 1rem;
    }

    @include md-down {
        padding: 16px;
        margin-bottom: 24px;

        h1 {
            font-size: 1.375rem;
        }

        .article-block__image {
            margin-top: 16px;
            margin-bottom: 24px;
        }
    }

    .cta {
        color: $blue-90;
    }
}

.data-insight-authors {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: $blue-60;
    margin-bottom: 16px;
}

.data-insight-author {
    color: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    &:hover {
        text-decoration: underline;
    }
}

.data-insight-blocks {
    > *:first-child {
        margin-top: 0;
    }
    > *:last-child {
        margin-bottom: 0;
    }
}

.data-insight-footer {
    border-top: solid $blue-20 1px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 24px;
    margin-top: 24px;

    @include sm-only {
        flex-direction: column;
        padding-top: 16px;
    }
}

.data-insights-related-topics {
    display: flex;
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
    gap: 8px 16px;

    p {
        margin: 0;
        white-space: nowrap;
        color: $blue-60;
    }

    ul {
        display: flex;
        flex: auto;
        flex-wrap: wrap;
        gap: 8px;
    }

    li {
        display: contents;
        list-style: none;

        @include topic-chip;
    }

    @include sm-only {
        padding-bottom: 16px;
        border-bottom: solid $blue-20 1px;
    }
}

.data-insight-copy-link-button {
    @include light-blue-button;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 24px 8px 24px;
    color: $blue-90;
    background-color: $blue-20;
    min-width: 132px;
    border-radius: 0;
    margin-left: auto;
    height: 40px;

    &:hover {
        background-color: $blue-10;
    }

    @include sm-only {
        margin-left: 0;
        width: 100%;
    }
}

.data-insight-cards-container {
    padding-top: 40px;
    border-top: $blue-10 4px solid;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    h2 {
        margin: 0;
    }

    .see-all-button {
        @include body-3-regular;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        border: 1px solid $vermillion;
        color: $vermillion;
        padding: 8px 24px;
        height: 40px;
        transition: 200ms;

        &:hover {
            color: $accent-vermillion;
            border-color: $accent-vermillion;
        }

        @include sm-only {
            display: none;
        }
    }

    @include md-down {
        border-top: none;
        padding-top: 16px;
    }
}

.data-insights-carousel {
    width: 100%;
}

// Index page
.data-insights-index-page {
    background-color: $gray-10;

    // Add a small margin above where we scroll to when arriving via a hash link
    [id] {
        scroll-margin-top: 40px;
    }
}

.data-insights-index-page__header {
    margin-bottom: 32px;
    padding-bottom: 32px;
    background-color: #fff;

    @include sm-only {
        margin-bottom: 0;
        padding-bottom: 24px;
        background-color: initial;
    }

    h2 {
        margin-top: 48px;
        margin-bottom: 4px;

        @include sm-only {
            @include h1-semibold;
            margin: 24px 0 4px 0;
        }
    }

    p {
        margin: 0;
        color: $blue-60;

        @include sm-only {
            @include body-2-regular;
            line-height: 21px;
        }
    }

    .filter-button {
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        text-align: left;
        margin-top: 8px;

        .filter-pill {
            display: inline-flex;
            align-items: center;
            padding: 8px;
            background-color: $blue-20;

            @include sm-up {
                padding: 6px 8px;
            }
            gap: 8px;
            box-shadow: inset 0 0 0 1px $blue-20;
            min-width: 0;

            &:hover {
                background-color: $blue-10;
                box-shadow: inset 0 0 0 1px $blue-10;
            }
        }

        .filter-pill__name {
            @include note-13-medium;
            color: $blue-90;
        }

        .filter-pill__icon {
            color: $blue-60;
            font-size: 12px;
        }

        .filter-pill__close {
            color: $blue-60;
            font-size: 11px;
            line-height: 0;
        }
    }
}

.data-insights-index-page__newsletter-signup {
    margin-bottom: 24px;
    grid-row: 2 / span 3;
    align-self: start;

    .newsletter-subscription-form__subheader {
        display: none;
    }

    @include md-down {
        grid-row: unset;
        .newsletter-subscription-form__email-submit {
            .newsletter-subscription-form__email {
                flex-grow: 4;
            }
            .newsletter-subscription-form__submit {
                padding: 9.5px 0;
                flex-grow: 1;
            }
        }
    }
}

.data-insights-index-page__pagination {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    a {
        color: $blue-60;
        min-width: 40px;
        min-height: 40px;
        text-align: center;
        line-height: 40px;
        transition: 200ms;
    }
    a.data-insights-index-page__pagination-link {
        &:hover {
            background-color: $blue-10;
        }
    }
    a.data-insights-index-page__pagination-link--disabled {
        pointer-events: none;
        svg {
            color: $blue-30;
        }
    }
    a.data-insights-index-page__pagination-link--active {
        background-color: $blue-20;
        color: $blue-90;
        pointer-events: none;
    }
}
